// 在此处添加你的JavaScript代码

/* 示例JavaScript结构：

// 获取DOM元素
const gallery = document.querySelector('.gallery');
const modal = document.querySelector('.modal');
const modalImg = document.querySelector('.modal-content');
const closeBtn = document.querySelector('.close');
const modalCaption = document.querySelector('.modal-caption');

// 图片数据
const images = [
    {
        src: 'path/to/image1.jpg',
        alt: '图片1描述',
        title: '图片1标题',
        size: '1x1' // 或 '2x1', '2x2' 等
    },
    // 添加更多图片...
];

// 创建图片项
function createGalleryItem(image) {
    const item = document.createElement('div');
    item.className = 'gallery-item';
    item.style.gridColumn = image.size === '2x1' ? 'span 2' : 'span 1';
    item.style.gridRow = image.size === '2x2' ? 'span 2' : 'span 1';
    
    item.innerHTML = `
        <img src="${image.src}" alt="${image.alt}">
        <div class="overlay">
            <h3>${image.title}</h3>
            <p>${image.alt}</p>
        </div>
    `;
    
    return item;
}

// 渲染图片画廊
function renderGallery() {
    images.forEach(image => {
        const item = createGalleryItem(image);
        gallery.appendChild(item);
    });
}

// 打开模态框
function openModal(src, caption) {
    modal.style.display = 'block';
    modalImg.src = src;
    modalCaption.textContent = caption;
}

// 关闭模态框
function closeModal() {
    modal.style.display = 'none';
}

// 事件监听
gallery.addEventListener('click', (e) => {
    const item = e.target.closest('.gallery-item');
    if (item) {
        const img = item.querySelector('img');
        const caption = item.querySelector('h3').textContent;
        openModal(img.src, caption);
    }
});

closeBtn.addEventListener('click', closeModal);
modal.addEventListener('click', (e) => {
    if (e.target === modal) {
        closeModal();
    }
});

// 初始化
renderGallery();

*/
